<template>
  <div class="kw-checkbox-group" @click="handlerClick">
    <label class="kw-checkbox-label" :class="status" @click="handlerLabelClick"></label>
  </div>
</template>

<script>
  export default {
    name: 'kw-checkbox',
    props: {
      value: {
        default: 'none'
      }
    },
    data() {
      return {
        status: 'none',
        options: ['none', 'indeterminate', 'selected'],
        id: 'id_' + new Date().getTime()
      }
    },
    watch: {
      value(val) {
        if (typeof val === 'boolean') {
          val = val? this.options[2]: this.options[0]
        }
        this.status = val
      }
    },
    methods: {
      handlerClick(e) {
        this.$emit('on-click', e)
      },
      handlerLabelClick() {
        if (this.status === this.options[0]) {
          this.status = this.options[2]
        } else {
          this.status = this.options[0]
        }

        this.$emit('on-change', this.status)
      }
    }
  }
</script>

<style lang="less">
 .kw-checkbox-group {
   display: inline-block;
   width: 16px;
   .kw-checkbox-label {
     display: inline-block;
     margin: -4px 0;
     width: 16px;
     height: 16px;
     cursor: pointer;
     border: 1px solid #dcdee2;
     &:before {
       display: block;
       text-align: center;
       font-size: 14px;
     }
     &.selected {
       background-color: #2d8cf0;
       border-color: #2d8cf0;
       &:before {
         content: "\2714";
         color: white;
       }
     }
     &.indeterminate {
       &:before {
         content: " ";
         width: 10px;
         height: 10px;
         margin: 2px;
         border-radius: 2px;
         background-color: #2d8cf0;
       }
     }
   }
 }
</style>